<template>
  <div class="book-list">
    <div
      class="book-list__group"
      v-for="(group, index) in source"
      :key="index">
      <div class="group-name">{{ group.groupTitle }}</div>
      <div class="group-list">
        <div
          class="group-list__item"
          :class="{
            'active': currentId === item.id
          }"
          v-for="item in group.friendList"
          :key="item.id"
          @click="handleFriend(item)">
          <el-avatar
            shape="square"
            :size="35"
            :src="item.avatar">
          </el-avatar>
          <span class="item-name">{{ item.nickname }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentId: {
      type: Number,
      default: -1
    },
    source: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    handleFriend (item) {
      this.$emit('choose', item)
    }
  }
}
</script>

<style lang="less" scoped>
.book-list {
  &__group {
    .group-name {
      font-size: 14px;
      padding: 4px 10px;
      background-color: #E8E7E6;
    }
    .group-list {
      &__item {
        display: flex;
        align-items: center;
        padding: 10px;
        background-color: #fff;
        .item-name {
          padding-left: 10px;
        }
        &:hover {
          background-color: #DAD9D8;
        }
        &.active {
          background-color: #C4C4C4;
        }
      }
    }
  }
}
</style>
